import React, { ReactNode, useEffect, useState } from 'react';
import classNames from 'classnames';
import Tabs from './Tabs';
import IconUser from '@/components/Icons/IconUser';
import IconBot from '@/components/Icons/IconBot';
import IconVoice from '@/components/Icons/IconVoice';
import IconCopy from '@/components/Icons/IconCopy';
import MarkdownRenderer from '@/components/MarkdownRenderer';

type Props = {
  id: string;
  isleft?: boolean;
  text?: any;
  time?: string;
  chart?: ReactNode;
  data?: ReactNode;
  sql?: string;
};
//滚动到底部
const scrollToBottom = (id: string) => {
  const container = document.getElementById(id);
  if (container) {
    container.scrollTop = container.scrollHeight;
  }
};
const ChatBoxCard: React.FC<Props> = ({ isleft = true, id, text, chart, data, sql, time }) => {
  const [newText, setNewText] = useState<string>(text);

  useEffect(() => {
    setNewText(text);
    scrollToBottom(id);
  }, [id, text]);

  return (
    <div id={id} className="flex flex-col ">
      {/* head */}
      <div className={classNames('flex items-center my-2 ', isleft ? '' : 'flex-row-reverse')}>
        {isleft ? (
          <IconBot className="border rounded-md flex flex-col w-8 h-8 shadow-lg " />
        ) : (
          <IconUser className="border rounded-md flex flex-col w-8 h-8 shadow-lg " />
        )}

        {/* copy */}
        {isleft ? (
          <div className="h-6 w-24 border border-gray-300 rounded-md mx-2 px-1 flex items-center">
            <IconVoice clasName="h-5 w-5 border-r border-r-gray-300" />
            <IconCopy clasName="h-5 w-5 border-r border-r-gray-300" />
          </div>
        ) : (
          <></>
        )}

        <div className="text-gray-400 text-xs mr-2">{time}</div>
      </div>

      {/* text */}
      <div className={classNames('flex ', isleft ? '' : 'flex-row-reverse')}>
        <div className={classNames('bg-white min-w-0 max-w-[90%] px-5 py-4 rounded-lg')}>
          {isleft ? <MarkdownRenderer content={newText} /> : newText}
        </div>
      </div>

      {/* chart */}
      <div>
        {/* 图表框,右边不显示 */}
        {isleft && (
          <div className="chartBox">
            <Tabs Chart={chart} Data={data} SQL={sql}></Tabs>
          </div>
        )}
      </div>
    </div>
  );
};

export default ChatBoxCard;
